<template>
  <view class="pages search font-B">
    <view class="padding-t20 jh-align-center jh-space-between">
      <view class="search-input jh-align-center">
        <image class="search-input-icon margin-r16" :src='ossDomain + "/icon-search.png"'></image>
        <input class="search-input-inner c-333 font-15 font-B" placeholder="请输入关键字" placeholder-class="c-ccc"/>
      </view>
      <view class="search-btn">
        <image class="search-btn-bg" :src="ossDomain + '/search-btn-bg.png'" mode="scaleToFill"></image>
        <view class="search-btn-main jh-flex-center">
          <image class="search-btn-icon" :src="ossDomain + '/icon-voice.png'"></image>
          <view class="font-15 c-999 margin-l10">语音识别</view>
        </view>
      </view>
    </view>
    <view class="search-body margin-t15 jh-space-between">
      <view class="search-left">
        <view class="search-left-title c-666 font-15 margin-b15 jh-line-height">热门搜索</view>
        <view class="jh-flex-wrap jh-flex">
          <view class="font-12 c-008399 jh-line-height margin-r20 margin-b10">周边景点</view>
          <view class="font-12 c-008399 jh-line-height margin-r20 margin-b10">季节预防</view>
          <view class="font-12 c-008399 jh-line-height margin-r20 margin-b10">挚亲好友</view>
          <view class="font-12 c-008399 jh-line-height margin-r20 margin-b10">文化旅游</view>
          <view class="font-12 c-008399 jh-line-height margin-r20 margin-b10">季节药品</view>
          <view class="font-12 c-008399 jh-line-height margin-r20 margin-b10">预防急救</view>
        </view>
      </view>
      <view class="search-right">
        <view class="search-right-title margin-b15 jh-space-between">
          <view class="c-666 font-15 jh-line-height">
            历史搜索
          </view>
          <image style="width: 13px;height: 16px;display: block;" :src="ossDomain + '/system-del.png'"></image>
        </view>
        <view class="jh-flex-wrap jh-flex">
          <view class="font-12 c-666 jh-line-height margin-r20 margin-b10">周边景点</view>
          <view class="font-12 c-666 jh-line-height margin-r20 margin-b10">季节预防</view>
          <view class="font-12 c-666 jh-line-height margin-r20 margin-b10">挚亲好友</view>
          <view class="font-12 c-666 jh-line-height margin-r20 margin-b10">文化旅游</view>
          <view class="font-12 c-666 jh-line-height margin-r20 margin-b10">季节药品</view>
          <view class="font-12 c-666 jh-line-height margin-r20 margin-b10">预防急救</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        ossDomain: uni.ossDomain,
      }
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .pages {
    width: 100%;
    height: 100vh;
    padding-right: 30px;
  }

  .search {
    padding-left: 30px;
    width: 100%;

    &-input {
      width: calc(100% - 122px);
      height: 34px;
      background-color: #fff;
      padding: 0 16px;
      box-sizing: border-box;
      &-icon{
        width: 20px;
        height: 20px;
        display: block;
      }
    }

    &-btn {
      width: 114px;
      height: 34px;
      border-radius: 4px;
      overflow: hidden;
      position: relative;

      &-bg {
        width: 100%;
        height: 100%;
      }

      &-main {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }

      &-icon {
        width: 14px;
        height: 21px;
        display: block;
      }
    }
    
    &-left{
      width: 55%;
      &-title{
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
      }
    }
    &-right{
      width: 40%;
      &-title{
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
      }
    }
  }
</style>
